<template>
  <div class="warap">
    <h2>后台管理系统</h2>
    <el-tabs type="border-card" class="tabs" stretch v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in tabsConfig"
        :key="index"
        :name="index"
      >
        <template #label>
          <span class="custom-tabs-label">
            <el-icon> <component :is="item.icon"></component> </el-icon
          ></span>
          <span>{{ item.label }}</span>
        </template>

        <component :is="item.component" ref="formRef" />
      </el-tab-pane>
    </el-tabs>

    <div class="passworldWrap">
      <el-checkbox v-model="isKeeepNumber">记住密码</el-checkbox>
      <el-link type="primary">忘记密码</el-link>
    </div>

    <el-button type="primary" class="submit" @click="handleSubmit"
      >登录</el-button
    >
  </div>
</template>

<script setup lang="ts">
import loginAccout from "./login-accout";
import loginPhone from "./login-phone";
import { Avatar, Iphone } from "@element-plus/icons-vue";
import { ref } from "vue";

const activeName = ref(0);

let isKeeepNumber = ref(true);

const tabsConfig = [
  {
    component: loginAccout,
    icon: Avatar,
    label: "账号登录",
  },
  {
    component: loginPhone,
    icon: Iphone,
    label: "手机登录",
  },
];

let formRef = ref();

const handleSubmit = async () => {
  await formRef.value[activeName.value]?.submit(isKeeepNumber.value);
};
</script>

<style lang="scss" scoped>
.warap {
  // width: 500px;
  // height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .passworldWrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .submit {
    width: 100%;
    margin-top: 10px;
  }
}

.tabs {
  width: 500px;
}
.tabs :deep(.el-tabs__content) {
  padding: 40px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>
